<template>
  <div class="relative-box">
    <el-upload
        class="upload-box"
        :disabled="disabled"
        :action='uploadUrl'
        :multiple="isMultiple"
        :limit="limit"
        :data="otherData"
        :name='filedName'
        :on-exceed="handleExceed"
        :on-success="handleSuccess"
        :on-error="handleError"
        :beforeUpload="beforeAvatarUpload"
        :accept="acceptFileType"
        :show-file-list="false"
        :headers="headers">
      <div class="align-center" v-if="!disabled">
        <el-button size="mini" :type="buttonType" :disabled="isReadonly" class="f-left normal-btn" plain ref="upload">{{ btnName }}</el-button>
        <slot name="info"></slot>
      </div>
      <template v-if="isShowList">
        <div v-for="(item, index) in fileList" :key="index" :class="isMargin ? 'margin-top-15' : ''">
          <el-link type="primary" @click="uploadLoad(item[fileUrlName])">
            {{ item[fileTxtName] }}
            <i v-if="!disabled" class="el-icon-delete el-icon--right" @click.stop="deleteFile(item[fileTxtName], index)"></i>
          </el-link>
        </div>
      </template>
    </el-upload>
  </div>
</template>

<script>
  export default {
    name: 'up-load',
    props: {
      isNewwindow:{
        type: Boolean,
        default: false,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      isReadonly: {
        type: Boolean,
        default: false,
      },
      limit: {
        type: Number,
        default: 100,
      },
      maxSize: {
        type: Number,
        default: 100,
      },
      isMultiple: {
        type: Boolean,
        default: false,
      },
      fileList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      otherData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      action: {
        type: String,
        default: '/frameworks/photos/upload',
      },
      prefix: {
        type: String,
        default: '/server-api/v1',
      },
      //限制类型
      acceptFileType: {
        type: String,
        default: '',
      },
      //限制类型
      filedName: {
        type: String,
        default: '',
      },
      //字段url名称
      fileUrlName: {
        type: String,
        default: 'url',
      },
      //字段txt名称
      fileTxtName: {
        type: String,
        default: 'name',
      },
      //按钮文字
      btnName: {
        type: String,
        default: '点击上传',
      },
      //是否展示上传后的list
      isShowList: {
        type: String,
        default: 'show',
      },
      //上传文件的按钮类型
      buttonType: {
        type: String,
        default: 'primary',
      },
      isMargin: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        uploadUrl: this.prefix + this.action,
        headers: {
          token: localStorage.getItem('token'), // 获取token
        },
        loading: null,
      };
    },
    computed: {},
    mounted() {},
    methods: {
      //点击叉号回调
      handleDialogClose() {
        this.$emit('close');
      },
      //上传成功
      handleSuccess(result,file, fileList) {
        this.$message.success(result.message);
        this.loading.close();
        this.$emit('handleSuccess', {
          result:result, file:file, fileList:fileList
        });
      },
      //上传失败
      handleError(file, fileList) {
        this.$emit('handleError', file, fileList);
        this.$message.error(file.message);
        this.loading.close();
      },
      //文件限制
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      //移除文件
      deleteFile(fileName, index) {
         if(this.disabled)return

        this.$confirm(`确定移除 ${fileName}？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            // this.$emit('handleRemove',index)
            this.fileList.splice(index, 1);
          })
          .catch(() => {});
      },
      //上传前判断文件大小
      beforeAvatarUpload(file) {
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
        const isLt2M = file.size / 1024 / 1024 < this.maxSize;
        if (!isLt2M) {
          this.$message({
            message: '上传文件大小不能超过' + this.maxSize + 'MB!',
            type: 'warning',
          });
        }
        if (isLt2M) {
          this.loading = this.$loading({
            lock: true,
            text: '加载中……',
            background: 'rgba(0, 0, 0, 0.7)',
          });
        }

        this.$emit("beforeUpload",file)

        return isLt2M;
      },
      //下载
      uploadLoad(url) {
        if(this.isNewwindow){
              window.open(url)
        }else{
              let a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
          

        
      },
    },
    components: {},
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-upload {
    text-align: left;
  }
</style>
